<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:replace="fragment/head"/>
    <link href="resources/assets/global/font-awesome/css/all.css" rel="stylesheet">
    <!-- BEGIN PAGE LEVEL PLUGINS -->
    <!--<link href="resources/assets/global/plugins/select2/css/select2.min.css" rel="stylesheet"/>
    <link href="resources/assets/global/plugins/select2/css/select2-bootstrap.min.css" rel="stylesheet"/>-->
    <link href="resources/assets/pages/css/login.min.css" rel="stylesheet"/>
    <link href="resources/assets/caryr/caryr.commom.css" rel="stylesheet"/>
    <!-- END PAGE LEVEL STYLES -->
    <style type="text/css">
        img.flag_icon {
            width: 20px;
            height: 15px;
            border: 1px solid #999;
            border-radius: 2px;
        }
    </style>
</head>

<body class=" login">
    <div class="logo"><a href="#"></a></div>
    <div class="content">
        <form class="login-form" action="./api/user/login" method="post" id='login-form' autocomplete='on'>
            <h3 class="form-title font-green">
                <!--<i class="fa fa-coffee green"></i>-->
                <i class="fas fa-globe font-green"></i>
                <span class='msg_login_title'>用户登陆</span>
            </h3>
            <div class="alert alert-danger display-hide">
                <button class="close" data-close="  alert"></button>
                <span class='msg_err_login'> 用户名/密码输入有误. </span>
            </div>
            <div class="form-group">
                <label class="control-label visible-ie8 visible-ie9">Company Code</label>
                <div class="input-icon">
                    <i class="fas fa-briefcase font-green"></i>
                    <input class="form-control form-control-solid placeholder-no-fix" type="text" placeholder="公司代码"
                           name="coco"/>
                </div>
            </div>
            <div class="form-group">
                <!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
                <label class="control-label visible-ie8 visible-ie9">Username</label>
                <div class="input-icon">
                    <i class="fa fa-user font-green"></i>
                    <input class="form-control form-control-solid placeholder-no-fix" type="text" placeholder="用户名"
                           name="name"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label visible-ie8 visible-ie9">Password</label>
                <div class="input-icon">
                    <i class="fa fa-key font-green"></i>
                    <input class="form-control form-control-solid placeholder-no-fix" type="password" placeholder="密码"
                           name="password"/>
                </div>
            </div>

            <div class="form-group">
                <div class='col-sm-6  col-xs-12'>
                    <a href="javascript:;" id="forget-password"
                       class="forget-password msg_forgetpwd_btn pull-left">忘记密码</a>
                </div>
                <div class="btn-group dropup col-sm-6 col-xs-12">
                    <button type="button"
                            class="multiselect dropdown-toggle mt-multiselect btn blue btn-circle btn-outline"
                            data-toggle="dropdown" title="None selected" style="width: 100%;" aria-expanded="false">
                        <span id="select-language"> <img class='flag_icon' src="resources/assets/pages/img/icon/cn.svg"
                                                         alt=""> 中文
                        </span> <b class="caret"></b>
                    </button>
                    <ul class="dropdown-menu pull-right" style="width: 100%;">
                        <li class='language'>
                            <a href="#" data-lang='cn'>
                                <img class='flag_icon' src="resources/assets/pages/img/icon/cn.svg" alt="">
                                <b>中文</b>
                            </a>
                        </li>
                        <li class='language'>
                            <a href="#" data-lang='en'>
                                <img class='flag_icon' src="resources/assets/pages/img/icon/gb.svg" alt="">
                                <b> English</b>
                            </a>
                        </li>
                        <li class='language'>
                            <a href="#" data-lang='kr'>
                                <img class='flag_icon' src="resources/assets/pages/img/icon/kr.svg" alt="">
                                <b> 한국어</b>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="form-actions">
                <button id='login_btn' type="button" class="btn green uppercase msg_login_btn" style='width: 100%'>登陆
                </button>
            </div>
            <div class="create-account">
                <p>
                    <a href="javascript:;" id="register-btn" class="uppercase msg_register_btn">注册新用户</a>
                </p>
            </div>
        </form>

        <!--============== BEGIN FORGOT PASSWORD FORM============== -->
        <form class="forget-form" method="post">
            <h3 class="font-green msg_forgetAndregister msg_pls_contact_admin">请联系系统管理员</h3>
            <div class="form-actions">
                <button type="button" id="back-btn" class="btn green btn-outline msg_com_formReturn">返回</button>
            </div>
        </form>
    </div>
    <th:block th:replace="fragment/rear"/>
    <!-- BEGIN PAGE LEVEL PLUGINS -->
    <script src="resources/assets/global/plugins/jquery-validation/js/jquery.validate.min.js"></script>
    <script src="resources/assets/global/plugins/jquery-validation/js/additional-methods.min.js"></script>
    <!--<script src="resources/assets/global/plugins/select2/js/select2.full.min.js"></script>-->
    <!-- BEGIN PAGE LEVEL SCRIPTS -->
    <script src="resources/assets/pages/scripts/login.js"></script>
    <script src="resources/assets/jquery.form.js"></script>
    <!-- END PAGE LEVEL SCRIPTS -->
    <script>
        jQuery(document).ready(function () {
            caryr.loadI18n();

            $('#login-form').ajaxForm({
                "success": function (data) {
                    window.location = 'dashboard';
                },
                "error": function (data) {
                    App.unblockUI();
                    var msgTxt = $.i18n.prop("msg_err_login");
                    swal({
                        title: msgTxt,
                        text: "",
                        type: "error"
                    });
                }
            });

            $('#login_btn').on('click', function () {
                App.blockUI();
                $('#login-form').submit();
            });

            var handleLogin = function () {
                $('#login-form').validate({
                    errorElement: 'span', //default input error message container
                    errorClass: 'help-block', // default input error message class
                    focusInvalid: false, // do not focus the last invalid input
                    rules: {
                        username: {
                            required: true,
                            minlength: 5,
                            maxlength: 20,
                        },
                        password: {
                            required: true,
                            minlength: 5,
                            maxlength: 20,
                        },
                        remember: {
                            required: false
                        }
                    },
                    messages: {
                        username: {
                            required: "请输入用户名",
                            minlength: "用户名长度：5~20",
                            maxlength: "用户名长度：5~20",
                        },
                        password: {
                            //required: "请输入密码",
                            required: $.i18n.prop("msg_err_pwd_require"),
                            minlength: "密码长度：5~20",
                            maxlength: "密码长度：5~20",
                        }
                    },
                    invalidHandler: function (event, validator) { //display error alert on form submit
                        $('.alert-danger', $('.login-form')).show();
                    },
                    highlight: function (element) { // hightlight error inputs
                        $(element)
                            .closest('.form-group').addClass('has-error'); // set error class to the control group
                    },
                    success: function (label) {
                        label.closest('.form-group').removeClass('has-error');
                        label.remove();
                    },
                    errorPlacement: function (error, element) {
                        error.insertAfter(element.closest('.input-icon'));
                    },
                    submitHandler: function (form) {
                        //form.submit(); // form validation success, call ajax form submit
                    }
                });
                $('.login-form input').keypress(function (e) {
                    if (e.which == 13) {
                        if ($('.login-form').validate().form()) {
                            $('.login-form').submit(); //form validation success, call ajax form submit
                        }
                        return false;
                    }
                });
            }

            var handleForgetPassword = function () {
                jQuery('#forget-password').click(function () {
                    jQuery('.login-form').hide();
                    jQuery('.forget-form').show();
                });
                jQuery('#back-btn').click(function () {
                    jQuery('.login-form').show();
                    jQuery('.forget-form').hide();
                });
            }

            var handleRegister = function () {
                jQuery('#register-btn').click(function () {
                    jQuery('.login-form').hide();
                    jQuery('.forget-form').show();
                });
            }

            handleLogin();
            handleForgetPassword();
            handleRegister();

            $('li.language').on('click', function (e) {
                var lang = $(this).find('a').attr('data-lang');
                var html = $(this).find('a').html();
                caryr.changeLanguage(lang);
                $('#select-language').html(html);
            });
        });
    </script>
</body>
</html>